class Popup extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({ mode: "open" });
    shadowRoot.innerHTML = this.template();

  }
  template() {
    return `
    <style>
      .customImport-wrapper {
        width: 300px;
        height: 160px;
        background: white;
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 998;
        transform: translate(-50%, -50%);
        padding: 10px 20px 0 20px;
        border-radius: 10px;
      }
      
      .customImport-mask {
        position: absolute;
        background-color: rgba(0, 0, 0, .5);
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 998;
      }
      
      .customImport-title{
      }
      .customImport-line{
        width: 100%;
        border-bottom: 1px solid rgb(154, 154, 154);
        padding: 4px 0 0 0;
      }
      .customImport-message{
        margin-top: 10px;
      }
      .customImport-btn-box{
        position: absolute;
        bottom: 0;
        right: 0;
        display: flex;
        padding: 0 10px 10px 0;
      }
      [class^="customImport-button"]{
        width: 80px;
        height: 30px;
        background: #3f93ff;
        color: white;
        text-align: center;
        line-height: 30px;
        font-size: 15px;
        border-radius: 4px;
        margin-right: 10px;
      }
      [class^="customImport-button"]:active{
        opacity: 0.7;
      }
      [class^="customImport-button"]:hover{
        cursor: pointer;
      }
      .customImport-button1{
        
      }
      .customImport-button2{
        color: #F45757;
        background-color: #FFF3F3;
        border: 1px solid #F9B5B5;
      
      }
      .customImport-header{
        display: flex;
        width: 100%;
        justify-content: space-between;
      }
      .customImport-x{
        font-size: 20px;
      }
    </style>
    <div class="customImport-container">
      <div class="customImport-mask"></div>
      <div class="customImport-wrapper">
        <div class="customImport-header">
          <div class="customImport-title">
            提示
          </div>
          <div class="customImport-x">×</div>
        </div>
        <div class="customImport-line"></div>
        <div class="customImport-message">
          请选择导入模式
        </div>
        <div class="customImport-btn-box">
          <div class="customImport-button1">追加</div>
          <div class="customImport-button2">覆盖</div>
        </div>
      </div>
    </div>
    <script src="./customImport-api.js"></script>
    `;
  }
  connectedCallback() {
    let container = document.querySelector(".customImport-btn-box")
    console.log(container)
    console.log("template element is connected");
  }
  // 生命周期：从文档DOM中删除时
  disconnectedCallback() {
    console.log(1111);
  }
  // 生命周期：被移动到新的文档时
  adoptedCallback() {
    console.log(22222);
  }

  // 生命周期：监听属性变化
  attributeChangedCallback() {
    console.log(3333333);
  }
}
customElements.define("custom-import-pop", Popup);
